import 'package:flutter/material.dart';
import 'icon_text_button.dart';
import 'my_text_button.dart';
import 'self_adaption_widgets.dart';
import 'full_screen_image_overlay.dart';

// 卡片数据封装
class StorageData {
  final String avatarUrl;
  final String userName;
  final String ip;
  final String publishTime;
  final List<String> imagesUrl;
  final String title;
  final String totalNum;
  final String nowNum;
  final String deadline;
  final String position;
  final String loveNum;
  final String shareNum;

  StorageData({
    required this.avatarUrl,
    required this.userName,
    required this.ip,
    required this.publishTime,
    required this.imagesUrl,
    required this.title,
    required this.totalNum,
    required this.nowNum,
    required this.deadline,
    required this.position,
    required this.loveNum,
    required this.shareNum,
  });
}

// 自定义的收藏盒子卡片
class StorageBoxCard extends StatefulWidget {
  final StorageData data; // 卡片的数据

  const StorageBoxCard({super.key, required this.data});

  @override
  State<StorageBoxCard> createState() => _StorageBoxCardState();
}

class _StorageBoxCardState extends State<StorageBoxCard> {
  @override
  Widget build(BuildContext context) {
    // 卡片数据
    var data = widget.data;
    // 卡片容器
    return Container(
      // 卡片底部留点间距
      margin: const EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(40),
        boxShadow: const [
          // 卡片阴影效果
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            offset: Offset(5, 5),
          ),
        ],
        // 卡片颜色渐变
        gradient: const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xffe4c3a4), // 渐变色起始颜色
            Color(0xfff7eade),
            Color(0xfffffdf9), // 渐变色结束颜色
          ],
        ),
      ),
      // 放置行来填充卡片内容
      child: Column(
        children: [
          // 卡片的头部内容,包括头像 用户名 ip 帖子发布时间
          Container(
            padding:
                const EdgeInsets.only(top: 20, left: 20, right: 20, bottom: 10),
            // 头部内容包含多个,使用Row组件
            child: Row(
              children: [
                // 头像
                Container(
                  height: 50,
                  width: 50,
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: 1,
                      color: Colors.white,
                    ),
                    borderRadius: BorderRadius.circular(50),
                    image: DecorationImage(
                      image: NetworkImage(data.avatarUrl), // 头像
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                // 放在除头像外其它内容的盒子
                Container(
                  margin: const EdgeInsets.only(left: 15),
                  height: 50, // 高度和头像的高度一样
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // 用户名 高度占父组件的3/5
                      SelfAdaptionText.fitHeight(data.userName, height: 30),
                      // ip 帖子发布时间 高度占父组件的2/5
                      SelfAdaptionText.fitHeight(
                        'IP: ${data.ip} ${data.publishTime}',
                        height: 20,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          // 图片展示块 一张图片时展示一张 两张及以上展示两张,查看更多点击图片详情看
          data.imagesUrl.length > 1
              // 展示两张图片的盒子
              ? Container(
                  margin: const EdgeInsets.only(left: 20, right: 20),
                  child: Row(
                    children: [
                      // 第1张图片
                      Expanded(
                        flex: 1,
                        child: FullScreenImageOverlay(
                          url: data.imagesUrl[0],
                          listImageUrl: data.imagesUrl,
                        ),
                      ),
                      const SizedBox(width: 5),
                      // 第2张图片
                      Expanded(
                        flex: 1,
                        child: FullScreenImageOverlay(
                          url: data.imagesUrl[1],
                          listImageUrl: data.imagesUrl,
                        ),
                      ),
                    ],
                  ),
                )
              // 展示一张图片的盒子
              : Container(
                  margin: const EdgeInsets.only(left: 20, right: 20),
                  child: FullScreenImageOverlay(
                    url: data.imagesUrl[0],
                    listImageUrl: data.imagesUrl,
                  ),
                ),

          // 分割线
          Container(
            height: 1,
            color: Colors.black12,
            margin: const EdgeInsets.fromLTRB(25, 5, 25, 5),
          ),

          // 标题以及其它帖子内容
          Container(
            padding: const EdgeInsets.only(left: 10, right: 10),
            margin: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 标题
                Text(
                  data.title,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 17,
                  ),
                ),
                const SizedBox(height: 5),
                Row(
                  children: [
                    // 搭子人数 截止日期 活动地点
                    Expanded(
                      flex: 23, // 将一行分成40份,这里占23份
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "搭子人数: ${data.nowNum}/${data.totalNum}",
                            style: const TextStyle(fontSize: 12),
                          ),
                          Text(
                            "截止日期: ${data.deadline}",
                            style: const TextStyle(fontSize: 12),
                          ),
                          Text(
                            "活动地点: ${data.position}",
                            style: const TextStyle(fontSize: 12),
                          ),
                        ],
                      ),
                    ),
                    const Expanded(flex: 1, child: SizedBox()),
                    // 将一行分成40份,这里占1份
                    // 喜欢 分享 聊天
                    Expanded(
                      flex: 16, // 将一行分成40份,这里占16份
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              // 喜欢
                              IconTextButton(
                                value: data.loveNum,
                                icon: Icons.heart_broken,
                                onPressed: () {
                                  print("点击了喜欢");
                                },
                              ),
                              // 分享
                              IconTextButton(
                                value: data.shareNum,
                                icon: Icons.share,
                                onPressed: () {
                                  print("点击了分享");
                                },
                              ),
                            ],
                          ),
                          const SizedBox(height: 5),
                          // 聊天
                          MyTextButton(
                            "聊天",
                            onPressed: () {
                              print("点击了聊天");
                            },
                          )
                        ],
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}
